/*
 * @Author: mayijun
 * @Date: 2022-05-14 11:12:52
 * @LastEditors: mayijun
 * @LastEditTime: 2022-06-10 15:23:23
 */
//拖拽功能封装
import { defineComponent, PropType, reactive, ref } from 'vue';
import draggable from 'vuedraggable';
import './index.scss';

const CommonDrag = defineComponent({
  name: 'CommonDrag',
  components: { draggable },
  props: {
    nodedata: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['search', 'refreshTree'],
  setup: (props, { slots, attrs, emit }) => {
    let treeData = reactive([props.nodedata]);

    return () => {
      return (
        <draggable
          class="common-drag"
          list={treeData}
          item-key="id"
          group={{ name: 'people', pull: 'clone', put: false }}
          drag-class="drag-item-bg"
          onEnd={(evt: any) => {
            if (evt.to.className != 'common-drag') {
              let type = 1;
              //维度
              if (evt.item._underlying_vm_.dimensionType) {
                type = 2;
              }
              emit('refreshTree', type, evt.item._underlying_vm_.id);
            }
          }}
          v-slots={{
            item: (item: any) => {
              return (
                <div class="list-complete-item">
                  <a-tooltip
                    effect="dark"
                    placement="top"
                    content={`${item.element.cnName}`}
                  >
                    <span>{item.element.cnName}</span>
                  </a-tooltip>
                </div>
              );
            }
          }}
        ></draggable>
      );
    };
  }
});

export default CommonDrag;
